<template>
  <div style="margin-left:40px;margin-right:40px;">
    <el-descriptions
        title="患者个人中心"
        :column="1"
        border
    >
      <template #extra>
        <el-button type="primary" @click="modify">修改个人信息</el-button>
      </template>
      <el-descriptions-item   align="center" label="姓名">
        {{info.name}}
      </el-descriptions-item>
      <el-descriptions-item  align="center" label="性别">
        {{genderFormat(info.gender)}}
      </el-descriptions-item>
      <el-descriptions-item  align="center" label="电话">
        {{info.phone}}
      </el-descriptions-item>
      <el-descriptions-item  align="center" label="出生日期">
        {{dateFormat(info.birth)}}
      </el-descriptions-item>
      <el-descriptions-item  align="center" label="医疗卡号" >
        {{info.medicalCard}}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions
        title="密码管理"
        :column="1"
        border
        style="margin-top: 30px"
    >
      <template #extra>
        <el-button type="primary" @click="repassVisible = true">修改密码</el-button>
      </template>
      <el-descriptions-item  align="center" label="密码" >
        ********
      </el-descriptions-item>
    </el-descriptions>

    <el-dialog  v-model="repassVisible" title="修改密码"  width="500">
      <el-form :model="passInfo" style="margin-right: 50px;">
        <el-form-item label="旧密码" :label-width="140">
          <el-input type="password" v-model="passInfo.oldPass" autocomplete="off" />
        </el-form-item>
        <el-form-item label="新密码" :label-width="140">
          <el-input type="password" v-model="passInfo.newPass" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="repassVisible = false">取消</el-button>
          <el-button type="primary" @click="handlePassModify">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!--修改个人信息表单-->
    <el-dialog v-model="modifyVisible" title="修改个人信息"  width="500">
      <el-form :model="modifyInfo" style="margin-right: 50px;">
        <el-form-item label="id" :label-width="140">
          <el-input disabled v-model="modifyInfo.id" autocomplete="off" />
        </el-form-item>
        <el-form-item label="姓名" :label-width="140">
          <el-input v-model="modifyInfo.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="手机号" :label-width="140">
          <el-input v-model="modifyInfo.phone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="出生日期" :label-width="140">
          <el-date-picker
              v-model="modifyInfo.birth"
              placeholder="请选择日期"
              style="width: 100%;"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="modifyVisible = false">取消</el-button>
          <el-button type="primary" @click="handleModify">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>


import {reactive, ref} from "vue";
import patientApi from "@/apis/patient";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";

const router = useRouter();

const userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
let info = reactive({
  id:'',
  name:'',
  phone:'',
  medicalCard:'',
  gender:'',
  birth:''
})
const getPersonal = async ()=>{
  const data ={
    id:userInfo.id
  }
  const res =  (await patientApi.getPersonal(data)).data
  info.id = res.id;
  info.gender = res.gender;
  info.name = res.name;
  info.phone = res.phone;
  info.medicalCard = res.medicalCard;
  info.birth = res.birth;
}
getPersonal();

function genderFormat(gender){
  if(gender === 0){
    return "男";
  }
  if(gender === 1){
    return "女";
  }
}

function dateFormat(birth) {
  const date = new Date(birth);
  const year = date.getFullYear(); // 获取年份
  const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 获取月份，月份从0开始，所以加1
  const day = date.getDate().toString().padStart(2, '0'); // 获取日
  return `${year}-${month}-${day}`;
}

const modifyVisible = ref(false)

const modifyInfo = reactive({
  id:'',
  name:'',
  phone:'',
  birth:''
})

const modify = () =>{
  modifyVisible.value = true;
  modifyInfo.id = info.id;
  modifyInfo.name = info.name;
  modifyInfo.phone = info.phone;
  modifyInfo.birth = info.birth;
}

const handleModify = async () =>{
  const res = await patientApi.modify(modifyInfo);
  if(res.code === 200){
    ElMessage({
      title:'成功提示',
      message:'修改个人信息成功',
      type:'success'
    });
  }else {
    ElMessage({
      title:'失败提示',
      message:'修改个人信息失败',
      type:'error'
    });
  }
  await getPersonal();
  modifyVisible.value = false;
}

const repassVisible = ref(false);
const passInfo = reactive({
  oldPass:'',
  newPass:''
})

const handlePassModify = async () =>{
  const data = {
    id:userInfo.id,
    oldPass:passInfo.oldPass,
    newPass:passInfo.newPass
  }
  const res = await patientApi.repass(data)
  if(res.code === 200){
    ElMessage({
      title:'成功提示',
      message:'修改密码成功，请重新登录',
      type:'success'
    });
    router.push('/login');
  }else {
    ElMessage({
      title:'失败提示',
      message:'修改密码失败，请检查旧密码是否正确',
      type:'error'
    });
  }
  repassVisible.value = false;
}

</script>



<style scoped>

</style>
